<script setup name="home">
import { onMounted, ref } from 'vue'
import { getAllNoteApi, getNoteTextByIdApi } from '../../services/note'
import { getAllNoteType } from '../../services/upload'
import { marker } from '@/utils/marker.js'

// 拖拽组件
import Draggable from 'vuedraggable'

import Mark from '@/utils/mark.js'
let mark = new Mark()

let noteType = ref([])
onMounted(async () => {
  // 获取所有的笔记
  getAllNote()
})

// 树形层级编译器
function transListToTreeData(list, rootValue) {
  const array = []
  list.forEach((item) => {
    // 改变一下对象的结构
    if (item.fid === rootValue) {
      item.children.push(...transListToTreeData(list, item.id))
      array.push(item)
    }
  })
  return array
}

const getAllNote = async () => {
  // 先得到所有的笔记数据
  let resb = await getAllNoteApi()
  // 获取类型数据
  let res = await getAllNoteType()

  // 改造原始数组结构
  const newData = res.data.map((item) => ({
    id: item.id,
    value: item.type,
    label: item.type,
    fid: item.fid,
    children: []
  }))
  // 把所有的笔记数据给加入打newData中
  for (let ele of newData) {
    for (let eles of resb.data) {
      if (ele.value === eles.type) {
        ele.children.push({
          label: eles.note_name,
          id: eles.id,
          fild: 1
        })
      }
    }
  }
  // 把东西加进入
  noteType.value = transListToTreeData(newData, 0)
}
const defaultProps = {
  children: 'children',
  label: 'label'
}

let note = ref('')
let title = ref()
// 点击到子项
async function handleNodeClick(data) {
  if (!data.fild) return
  let res = await getNoteTextByIdApi(data.id)
  let strs = mark.dealWith(marker(res.data))
  title.value = mark.completeBody(strs)
  note.value = mark.addExtraClass(strs, 'home-h')
}

// 准备一个心跳，请求和刷新token

// 标签栏
let tabBarHosh = ref([
  { txt: 'insult', route: '/insult' },
  { txt: '聊天室', route: '/chat' },
  { txt: '写笔记', route: '/write' },
  { txt: '用户中心', route: '/home' },
  { txt: '记账铺子', route: '/accounting' },
  { txt: '退出登录', route: 'different' }
])
</script>

<template>
  <div class="dobe">
    <!-- 顶部导航栏 -->
    <div class="nav-top-home-regular">
      <div class="nav-top-home-move">
        <div class="head-left">
          <div class="title-img"></div>
          <span class="fgs">笔记海</span>
        </div>
        <!-- <div class="head-right"> -->
        <draggable
          tag="div"
          class="head-right"
          v-model="tabBarHosh"
          group="people"
          @start="drag = true"
          @end="drag = false"
          item-key="id"
          v-bind="{
            animation: 200,
            group: 'description',
            disabled: false,
            ghostClass: 'ghost'
          }"
        >
          <template #item="{ element }">
            <router-link
              v-if="element.route !== 'different'"
              :to="element.route"
              class="title-lib"
            >
              <span>{{ element.txt }}</span>
            </router-link>
            <a v-else href="javascript:void(0);" class="title-lib">
              <span>退出登录</span>
            </a>
          </template>
        </draggable>

        <!-- <div class="head-right">


        </div> -->

        <!-- <router-link to="/chat" class="title-lib">
            <span>聊天室</span>
          </router-link>
          <router-link to="/write" class="title-lib">
            <span>写笔记</span>
          </router-link>
          <router-link to="/home" class="title-lib">
            <span>用户中心</span>
          </router-link>
          <router-link to="/accounting" class="title-lib">
            <span>记账铺子</span>
          </router-link> -->
        <!-- </div> -->
      </div>
    </div>
    <!-- 顶部以下的主体定高 -->
    <div class="home-note-body">
      <div class="note-item-sit">
        <div class="sit-left">
          <el-tree
            class="treeDom"
            :data="noteType"
            :props="defaultProps"
            highlight-current
            default-expand-all
            @node-click="handleNodeClick"
          />
        </div>

        <div class="sit-right">
          <div class="sit-center" v-html="note"></div>
          <div class="sit-title">
            <div
              v-for="item in title"
              :key="item.title"
              :class="`abc-title abc-${item.level}`"
            >
              <a :href="'#' + item.id">{{ item.title }}</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 分为左中右三个部分,左右部分全部定高,使用滚动条 -->
  </div>
</template>

<style lang="scss" scoped>
@import '@/styles/vueCode.css';
// 大于1200
@media (min-width: 1110px) {
  .nav-top-home-move {
    padding: 0 40px;
  }

  .home-note-body {
    padding: 0 40px;
  }
  .sit-left {
    left: 40px;
  }

  .sit-center {
    padding-right: 240px;
  }
}

// 小于1110px
@media (max-width: 1110px) {
  .nav-top-home-move {
    width: 100vw;
    padding: 0 40px;
    padding-right: 50px;
  }
  .home-note-body {
    padding: 0px;
  }
  .sit-left {
    left: 0px;
  }
  // 比价标题栏消失
  .sit-title {
    display: none;
  }

  .sit-center {
    padding-right: 40px;
  }
}

.nav-top-home-regular {
  // width: 100%;
  // height: 9vh;
  .nav-top-home-move {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 9vh;
    z-index: 99;
    background-color: rgb(255, 255, 255);
    border-bottom: 1px solid var(--border-bottom);
    display: flex;
    align-items: center;
    justify-content: space-between;

    .head-right,
    .head-left {
      height: 100%;
      display: flex;
      align-items: center;
    }

    .head-right {
      .title-lib {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        font-size: 13px;
        margin-left: 20px;
        color: #000;
        font-weight: 300;
        text-decoration: none;
        // svg 颜色设置失效

        .icon-font {
          font-size: 16px;
        }

        &:hover {
          color: #42b983;
          cursor: pointer;
        }
      }
    }

    .head-left {
      font-weight: 600;
      .title-img {
        width: 40px;
        height: 40px;
        margin-right: 10px;
        background-image: url(../../../public/favicon.png);
        background-repeat: no-repeat;
        background-size: 100%;
      }
    }
  }
}

.home-note-body {
  .note-item-sit {
    padding-left: 240px;
    padding-top: 9vh;
    .sit-left {
      position: fixed;
      padding-right: 40px;
      top: 9vh;
      height: 91vh;
      width: 240px;
      // background-color: #86e4ef;
      border-right: 1px solid var(--border-bottom);

      .treeDom {
        width: 239px;
        height: 100%;
      }
    }

    .sit-right {
      width: 100%;
      height: 1000px;
      padding-left: 40px;
      // background-color: #b2efa3;

      .sit-center {
        // flex: 1;
        // background-color: pink;
      }
      .sit-title {
        position: fixed;
        top: 9vh;
        right: 40px;
        width: 200px;
        height: 91vh;
        overflow-y: scroll;
        // background-color: #9cd1e1;
      }
    }
  }
}
</style>
